<template>
  <div class="roleItem-container">
    <div class="item-title">详情</div>

    <div v-if="Role != {}">
      <div class="input-suffix">
        角色名称：
        <el-input class="input-content" v-model="Role.name"> </el-input>
      </div>

      <div class="operate-container">
        <el-button @click="back()">返回</el-button>
        <el-button
          v-if="type == 'edit' || type == 'add'"
          type="success"
          @click="save()"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Input, Message } from "element-ui";
import { GetRole } from "../api/Role";
import { UpdateRole } from "../api/Role";
import { AddRole } from "../api/Role";
export default {
  components: {
    [Button.name]: Button,
    [Input.name]: Input,
  },
  data() {
    return {
      id: "",
      type: "",
      Role: {},
      content: "",
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    save() {
      if (this.type == "add") {
        this.Role.id = getRandomIntInclusive(1, 1000);
        AddRole(this.Role).then((result) => {
          if (result.code == "200") {
            Message({ message: "添加成功", type: "success" });
            this.Role = result.Role;
            setTimeout(() => {
              this.back();
            }, 500);
          }
        });
      } else {
        console.log(this.Role);
        UpdateRole(this.Role).then((result) => {
          if (result.code == "200") {
            Message({ message: "修改成功", type: "success" });
            this.Role = result.Role;
            setTimeout(() => {
              this.back();
            }, 500);
          }
        });
      }
    },
  },
  created() {
    console.log("created");
    let { id, type } = this.$route.params;
    console.log(id);
    console.log(type);
    this.id = id;
    this.type = type;
    var _this = this;
    if (type != "add") {
      GetRole(id).then((result) => {
        console.log("GetRole", result.data);
        _this.Role = result.data;
      });
    }
  },
};
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
</script>

<style>
.input-content {
  width: 50rem !important;
  margin-top: 20px;
}
.operate-container {
  text-align: center;
  margin-top: 100px;
}
.input-suffix > span {
  width: 5rem;
  display: inline-block;
}
.item-title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: bold;
}
.roleItem-container {
  padding: 20px;
}
.block {
  margin-top: 30px;
}
</style>
